<template>
  <el-table
    :header-cell-style="{
      backgroundColor: '#dfdcea',
      color: 'black',
      fontSize: '14px',
      textAlign: 'center',
    }"
    :cell-style="{
      color: 'black',
      fontSize: '14px',
      textAlign: 'center',
      border: '1px solid #dfdcea',
    }"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="custom_id.name" label="姓名" width="180" />
    <el-table-column prop="custom_id.tell" label="手机号码" width="180" />
    <el-table-column prop="room_id.name" label="房型" width="180" />
    <el-table-column prop="house_id.housename" label="房价类型" width="180" />
    <el-table-column prop="housing_price" label="房价" width="180" />
    <el-table-column prop="catered" label="包餐" width="180" />
    <el-table-column
      :formatter="DateFormat"
      prop="time_appointment"
      label="预约时间"
      width="180"
    />
    <el-table-column prop="status" label="状态" width="180" />

    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="scope">
        <el-button link size="small" @click="handleClick(scope.row)">
          详情
        </el-button>
        <el-button link size="small" @click="handleClick1(scope.row)"
          >入住</el-button
        >
        <el-button link size="small">取消</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    draggable="true"
    v-model="dialogVisible"
    title="预约详情"
    width="1000"
    :before-close="handleClose"
  >
    <div class="dialog-content">
      <div>
        <p>姓名：{{ rows.custom_id.name }}</p>
        <p>房型：{{ rows.room_id.name }}</p>
        <p>房价：{{ rows.housing_price }}</p>
        <p>
          预约时间：{{
            moment(rows.time_appointment).format("YYYY-MM-DD HH:mm")
          }}
        </p>
      </div>
      <div>
        <p>预约单号：{{ rows._id }}</p>
        <p>手机号码：{{ rows.custom_id.tell }}</p>
        <p>包餐：{{ rows.catered }}</p>
        <p>状态：{{ rows.status }}</p>
      </div>
    </div>
    <template #footer> </template>
  </el-dialog>

  <el-dialog
    draggable="true"
    v-model="dialogVisible1"
    title="快速入住"
    width="1000"
  >
  <h3 style="margin-left: 50px;">客人信息</h3>
    <div class="dialog-content">
      <div>
        <p>
          姓名：<el-input v-model="rows1.custom_id.name" style="width: 240px" />
        </p>
        <p>是否VIP：{{ rows1.custom_id.VIP }}</p>
        <p style="display: flex">
          证件类型：<el-select
            v-model="rows1.custom_id.document_type"
            style="width: 210px"
            name="document_type"
            id=""
          >
            <el-option value="" style="font-size: 16px">请选择证件</el-option>
            <el-option value="身份证" style="font-size: 16px">身份证</el-option>
            <el-option value="护照" style="font-size: 16px">护照</el-option>
          </el-select>
        </p>
        <p>
          性别：<input
            type="radio"
            v-model="rows1.custom_id.gender"
            name="gender"
            value="男"
          />男<input
            v-model="rows1.custom_id.gender"
            type="radio"
            name="gender"
            value="女"
          />女
        </p>
      </div>
      <div>
        <p>
          手机号：<el-input
            v-model="rows1.custom_id.tell"
            style="width: 240px"
          />
        </p>
        <p>VIP类型：{{ rows1.custom_id.VIP_Level }}</p>
        <p>
          证件号：<el-input
            v-model="rows1.custom_id.document_number"
            style="width: 240px"
          />
        </p>
        <p>
          详细地址：<el-input
            v-model="rows1.custom_id.address"
            style="width: 240px"
          />
        </p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn" @click="next_step1()">下一步</el-button>
        <el-button @click="dialogVisible1 = false"> 退出 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    draggable="true"
    v-model="dialogVisible2"
    title="快速入住"
    width="1000"
  >
  <h3 style="margin-left: 50px;">入住信息</h3>
    <div class="dialog-content">
      <div>
        <p>房间号：{{ rows1.number_id.room_number}}</p>
        <p>入住时间：{{moment(rows1.time_appointment).format("YYYY-MM-DD HH:mm")  }}</p>
        <p>退房时间：{{ moment(rows1.Pre_refund_time).format("YYYY-MM-DD HH:mm")   }}</p>
        <p>包餐：{{ rows1.catered }}</p>

      </div>
      <div>
        <p>房间状态：<span>可入住</span></p>
        <p>天数：<el-input-number v-model="rows1.day_num" :min="1" :max="10" @change="handleChange" /></p>
        <p>房价：{{ rows1.housing_price }}</p>
        <p>OAT单号：{{ rows1._id }}</p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn" @click="next_step2()">下一步</el-button>
        <el-button @click="dialogVisible2 = false"> 退出 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    draggable="true"
    v-model="dialogVisible3"
    title="快速入住"
    width="1000"
  >
  <h3 style="margin-left: 50px;">预付房费</h3>
    <div class="dialog-content">
      <div>
        <p>付款方式：<span>线上已付</span></p>
        <p>押金金额：300元</p>
        <p>操作人：陈伟康</p>
      </div>
      <div>
        <p>付款金额：{{ rows1.housing_price * rows1.day_num }}</p>
        <p>
          收取方式：<input
            type="radio"
            v-model="现金"
            name="money"
            value="现金"
          />现金<input
            v-model="扫码"
            type="radio"
            name="money"
            value="扫码"
          />扫码
          <input
            v-model="刷卡"
            type="radio"
            name="money"
            value="刷卡"
          />扫码
        </p>

      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn" @click="next_step3()">下一步</el-button>
        <el-button @click="dialogVisible3 = false"> 退出 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    draggable="true"
    v-model="dialogVisible4"
    title="快速入住"
    width="1000"
  >
  <h3 style="margin-left: 50px;">发卡信息</h3>
    <div class="dialog-content">
      <div>
        <p>客单号：{{ rows1._id }}</p>
        <p>房间号：1001</p>
        <p>姓名：<el-input
            v-model="rows1.custom_id.name"
            style="width: 240px"
          /></p>
      </div>
      <div></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn" @click="dialogVisible4 = false">完成</el-button>
        <el-button @click="dialogVisible4 = false">打印客单</el-button>
        <el-button @click="dialogVisible4 = false"> 退出 </el-button>
      </div>
    </template>
  </el-dialog>
  <div style="margin: 30px 0">
    <el-pagination
      :page-sizes="[3, 5, 9, 15]"
      @next-click="nextClick"
      @prev-click="prevClick"
      :page-size="obj.pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page="obj.currenPage"
      background
      layout="total,sizes,prev, pager, next,jumper"
      :total="totals"
    />
  </div>
</template>

<!-- moment('time_appointment').format(YYYY-MM-dd hh:mm:ss) -->
<script setup>
import moment from "moment";
import { ElMessageBox } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import http from "../utils/request";

const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
const dialogVisible3 = ref(false);
const dialogVisible4 = ref(false);
let room_types = ref([]);
let rows = ref([]);
let rows1 = ref({});
let rows2 = ref([]);
let rows3 = ref([]);
let rows4 = ref([]);
let totals = ref(0);

let obj = ref({
  currentPage: 1,
  pageSize: 5,
});

//日期格式化
function DateFormat(row, column) {
  var data = row[column.property];
  if (data == undefined) {
    return "";
  }
  return moment(data).format("YYYY-MM-DD HH:mm");
  // return moment(data).format('YYYY-MM-DD HH:mm:ss');
}

let nextClick = (val) => {
  obj.value.currentPage = val;
  getreservation();
};

let sizeChange = (val) => {
  obj.value.pageSize = val;
  getreservation();
};

let currentChange = (val) => {
  obj.value.currentPage = val;
  getreservation();
};

let prevClick = (val) => {
  obj.value.currentPage = val;
  getreservation();
};

//获取房型信息
let getroomtype = async () => {
  let {
    data: { room_type },
  } = await http.get("/room_type");
  room_types.value = room_type;
};

let reservations = ref([]);

//获取预约信息
let getreservation = async () => {
  let {
    data: { pagelist, total },
  } = await http.get("/reservation", { params: obj.value });
  reservations.value = pagelist;
  totals.value = total;
};

let tableData = reservations;

const handleClick = (row) => {
  rows.value = row;
  dialogVisible.value = true;
  console.log(row, "11111111");
};

const handleClick1 = (row) => {
  console.log(row, "ghhhhhhhhhh");

  rows1.value = row;
  rows2.value = row;
  rows3.value = row;
  rows4.value = row;
  dialogVisible1.value = true;
};

let next_step1 = (rows) => {
  dialogVisible1.value = false;
  dialogVisible2.value = true;
};

let next_step2 = () => {
  dialogVisible2.value = false;
  dialogVisible3.value = true;
};
let next_step3 = () => {
  dialogVisible3.value = false;
  dialogVisible4.value = true;
};

onMounted(() => {
  getroomtype();
  getreservation();
});
</script>
<style scoped>
.el-button.is-link {
  color: #5d4f96;
}

.dialog-content {
  display: flex;
  justify-content: space-around;
}

.btn {
  background-color: #5d4f96;
  color: white;
}
</style>